<template>
	<button
		class="button"
		:class="{
			[type]: true,
			[size]: true,
			isloading: loading,
		}"
		:style="{
			borderRadius: circle + 'px',
		}"
		v-on="$listeners"
	>
		<div class="button-body">
			<span class="iconfont iconloading loading"></span>
			<slot />
		</div>
	</button>
</template>

<script>
/**
 * 按钮组件的分析（你希望这个组件别人如何使用？）
 * 例子
 * el-button - props
 * 				颜色：type = primary | success | warning | danger | info <String>
 * 				文字：slot
 * 				大小：size = medium | mini <String>
 * 				是否是圆角: circle <Number>
 * 				加载状态：loading <Boolean>
 * 			  - event
 * 				支持所有的原生事件
 */

export default {
	name: "hm-button",
	props: {
		type: {
			type: String,
			default: "primary",
			// props的验证函数，如果用户给type传递不属于我们定义的值，会验证不通过
			// validtor函数需要在webpack的配置中指定属性 mode: "development",
			validator: (value) => {
				return ["primary", "success", "warning"].includes(value);
			},
		},
		size: {
			type: String,
			default: "medium",
			validator: (value) => {
				return ["medium", "mini"].includes(value);
			},
		},
		circle: {
			type: Number,
			default: 4,
		},
		loading: {
			type: Boolean,
			default: false,
		},
	},
};
</script>

<style lang="less">
@import "./common/theme.less";
@import "//at.alicdn.com/t/font_2171348_kuyfkae8wl9.css";

.button {
	border: none;
	background: @primary;
	border-radius: 4px;
	padding: 10px 20px;
	color: #fff;
	outline: none;

	.button-body {
		display: flex;
		align-items: center;
	}

	.loading {
		display: none;
		animation: rotate 1s linear infinite;
		// display: block;
		line-height: 0;
		margin-right: 5px;
	}
}

// 按钮如果加上了isloading的class.意味出现旋转的按钮，并且亮度高了
.isloading {
	.loading {
		display: block;
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
		transform-origin: center center;
	}
	to {
		transform: rotate(360deg);
		transform-origin: center center;
	}
}

// type的class
.primary {
	background: @primary;
	&:hover {
		background: saturate(@primary, 50%);
	}
	&:active {
		background: @primary;
	}
	&.isloading {
		background: lighten(@primary, 20%);
	}
}

.success {
	background: @success;
	&:hover {
		background: saturate(@success, 50%);
	}
	&:active {
		background: @success;
	}
	&.isloading {
		background: lighten(@success, 20%);
	}
}
.warning {
	background: @warning;
	&:hover {
		background: saturate(@warning, 50%);
	}
	&:active {
		background: @warning;
	}
	&.isloading {
		background: lighten(@warning, 20%);
	}
}
// size的class
.mini {
	padding: 5px 20px;
}
</style>